import React, { Component } from 'react';
import { Animated, TextInput, View, Image, StatusBar, Text, TouchableOpacity, FlatList, ImageBackground, DeviceEventEmitter, Platform } from 'react-native';
import TabBarTitle from '../components/TabBarTitle';
import { TabBarAnimationImage } from '../components/TabBarImage';
import Colors from '../constants/Colors';
import { width, unitWidth, statusBarHeight, titleHeight } from '../constants/AdapterUtil';
import Swiper from 'react-native-swiper';
import StickyListView from '../components/StickyListView';
import MoreClassification from '../components/MoreClassification';
import { DeleteTextView } from '../components/MyTextView';
import { ServiceProviderTypeModal } from '../components/Modal';
import Permissions from 'react-native-permissions';
import CommonUtil from '../constants/CommonUtil';
import { api_order_workorder_oneCate, api_index, api_merch_list_category, api_merch_list_ajaxmerchuser } from '../constants/HttpServices';
import { postFetch } from '../constants/HttpExtension';
import { contactBrowser } from '../constants/Gobrowser';
import { MyHeader } from '../components/MyHeader';
import { Rating, AirbnbRating } from 'react-native-elements';
import { SMButton, SDButton } from '../components/Button';

export default class ServiceProviderListScreen extends Component {

    constructor(props) {
        super(props)
        this.classify = this.props.navigation.getParam('classify', '0');
        this.state = {
            CarouselList: [],
            brandList: [],
            list: [],
            showSxMore: false,
            district: '',

            oneCate: [],//一个分类
            chooseCate: {},
            desc: '1',//1综合降序,2综合升序,3销量降序,4销量升序，5价格降序，6价格升序
        }
    }

    componentDidMount() {
        this.refs.StickyListView._onRefresh();
        this.props.navigation.addListener('didFocus', payload => {
            this.getIndex();
        })
    }

    componentWillUnmount() {

    }

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorF5 }}>
                <MyHeader title='服务商' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                <View style={{ flex: 1 }}>
                    <StickyListView
                        ref='StickyListView'
                        list={this.state.list}
                        scrollEnabled={!this.state.showSxMore}
                        getList={this.getData.bind(this)}
                        stickView={
                            <View style={{ height: 68 * unitWidth, backgroundColor: Colors.white, width: width }}>
                                <View style={{ flexDirection: 'row', height: 31 * unitWidth, alignItems: 'center' }}>
                                    <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} activeOpacity={0.5}
                                        onPress={() => {
                                            this.setState({
                                                desc: this.state.desc == '1' ? '2' : '1'
                                            }, () => {
                                                this.refs.StickyListView._onRefresh();
                                            })
                                        }}>
                                        <Text style={{ color: this.state.desc == '1' || this.state.desc == '2' ? Colors.colorOrange : Colors.black }}>综合</Text>
                                        <Image source={CommonUtil.getDescArrow(this.state.desc, '1', '2')}
                                            style={{ width: 7 * unitWidth, height: 5 * unitWidth, marginLeft: 3 * unitWidth }}
                                            resizeMode='stretch' />
                                    </TouchableOpacity>
                                    <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} activeOpacity={0.5}
                                        onPress={() => {
                                            this.setState({
                                                desc: this.state.desc == '3' ? '4' : '3'
                                            }, () => {
                                                this.refs.StickyListView._onRefresh();
                                            })
                                        }}>
                                        <Text style={{ color: this.state.desc == '3' || this.state.desc == '4' ? Colors.colorOrange : Colors.black }}>公司规模</Text>
                                        <Image source={CommonUtil.getDescArrow(this.state.desc, '3', '4')}
                                            style={{ width: 7 * unitWidth, height: 5 * unitWidth, marginLeft: 3 * unitWidth }}
                                            resizeMode='stretch' />
                                    </TouchableOpacity>
                                    <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} activeOpacity={0.5}
                                        onPress={() => {
                                            this.setState({
                                                desc: this.state.desc == '5' ? '6' : '5'
                                            }, () => {
                                                this.refs.StickyListView._onRefresh();
                                            })
                                        }}>
                                        <Text style={{ color: this.state.desc == '5' || this.state.desc == '6' ? Colors.colorOrange : Colors.black }}>距离</Text>
                                        <Image source={CommonUtil.getDescArrow(this.state.desc, '5', '6')}
                                            style={{ width: 7 * unitWidth, height: 5 * unitWidth, marginLeft: 3 * unitWidth }}
                                            resizeMode='stretch' />
                                    </TouchableOpacity>
                                    <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} activeOpacity={0.5}
                                        onPress={() => {
                                            if (!this.refs.ServiceProviderTypeModal.isShow()) {
                                                this.setState({
                                                    showSxMore: true
                                                }, () => {
                                                    this.refs.StickyListView.scrollTo(0);
                                                    this.refs.ServiceProviderTypeModal.showModal();
                                                })
                                            } else {
                                                this.setState({
                                                    showSxMore: false
                                                }, () => {
                                                    this.refs.ServiceProviderTypeModal.hideModal();
                                                })
                                            }
                                        }}>
                                        <Image source={!this.state.showSxMore ? require('../res/ic_sx.png') : require('../res/ic_sx_o.png')}
                                            style={{ width: 13 * unitWidth, height: 13 * unitWidth }}
                                            resizeMode='stretch' />
                                        <Text style={{ marginLeft: 3 * unitWidth }}>筛选</Text>
                                    </TouchableOpacity>
                                </View>
                                <View style={{ flexDirection: 'row', height: 37 * unitWidth, alignItems: 'center', flexWrap: 'wrap' }}>
                                    {this.getScreenView()}
                                </View>
                            </View>
                        }
                        top={0 * unitWidth}
                        stickHeight={68 * unitWidth}
                        scrollStick={0.1}
                        childView={(item, index) => {
                            return (
                                <TouchableOpacity style={{
                                    width: width,
                                    height: 145 * unitWidth,
                                    backgroundColor: Colors.white, justifyContent: 'center'
                                }} activeOpacity={0.7} onPress={() => {
                                    this.props.navigation.navigate('ServiceProviderDetail', { merchid: item.id })
                                }}>
                                    <View style={{
                                        paddingHorizontal: 20 * unitWidth,
                                        flexDirection: 'row', alignItems: 'center'
                                    }}>
                                        <Image style={{ width: 115 * unitWidth, height: 90 * unitWidth }} source={{ uri: item.logo }} resizeMode='stretch' />
                                        <View style={{ alignItems: 'flex-start', marginLeft: 7 * unitWidth }}>
                                            <Text style={{ color: Colors.black, fontSize: 15 }}>{item.merchname}</Text>
                                            <Rating
                                                style={{ marginTop: 7 * unitWidth }}
                                                readonly={true}
                                                startingValue={item.score}
                                                imageSize={20}
                                            />
                                            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 7 * unitWidth }}>
                                                <Image style={{ width: 13 * unitWidth, height: 16 * unitWidth }} source={require('../res/syss_dddw.png')} resizeMode='stretch' />
                                                <Text style={{ color: Colors.color99, fontSize: 13, marginLeft: 5 * unitWidth }}>{item.address}</Text>
                                            </View>
                                            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 7 * unitWidth }}>
                                                {item.is_realname > 0 ? <SMButton style={{}} id={item.id} /> : null}
                                                {item.is_realname > 2 ? <SDButton style={{ marginLeft: 5 * unitWidth }} id={item.id} /> : null}
                                            </View>
                                        </View>
                                        <TouchableOpacity style={{
                                            alignSelf: 'flex-start', alignItems: 'center',
                                            position: 'absolute', right: 15 * unitWidth,
                                        }}
                                            activeOpacity={0.5}
                                            onPress={() => {
                                                if (item.isfollow == 1) {
                                                    CommonUtil.cancelfollow(item.id, {
                                                        success: (response) => {
                                                            this.refs.StickyListView._onRefresh();
                                                        },
                                                        fail: (response) => {

                                                        }
                                                    })
                                                } else if (item.isfollow == 0) {
                                                    CommonUtil.follow(item.id, {
                                                        success: (response) => {
                                                            this.refs.StickyListView._onRefresh();
                                                        },
                                                        fail: (response) => {

                                                        }
                                                    })
                                                }
                                            }}>
                                            <Image style={{ width: 18 * unitWidth, height: 16 * unitWidth }} source={item.isfollow == 1 ? require('../res/syss_guanzhu.png') : require('../res/syss_guanzhu2.png')} resizeMode='stretch' />
                                            <Text style={{ color: Colors.color66, fontSize: 13, marginTop: 10 * unitWidth }}>关注</Text>
                                        </TouchableOpacity>
                                    </View>
                                    <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10 * unitWidth, marginHorizontal: 20 * unitWidth }}>
                                        <Image style={{ width: 14 * unitWidth, height: 14 * unitWidth }} source={require('../res/syss_zyyw.png')} resizeMode='stretch' />
                                        <Text style={{ color: Colors.color66, fontSize: 14, marginLeft: 5 * unitWidth }}>主营业务：{item.salecate}</Text>
                                    </View>
                                    {item.redpackid != '0' ?
                                        <TouchableOpacity style={{ position: 'absolute', right: 15 * unitWidth, top: 70 * unitWidth }} activeOpacity={0.7}>
                                            <Image style={{ width: 20 * unitWidth, height: 40 * unitWidth }} source={require('../res/syss_hongbao.png')} resizeMode='stretch' />
                                        </TouchableOpacity> : null}
                                    {index == this.state.list.length - 1 ?
                                        null : <View style={{ backgroundColor: Colors.colorE8, width: 338 * unitWidth, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                                    }
                                </TouchableOpacity>
                            )
                        }}
                        coverListView={
                            this.state.showSxMore ?
                                <TouchableOpacity style={{
                                    position: 'absolute', top: 68 * unitWidth,
                                    height: '100%', width: '100%', backgroundColor: 'rgba(0,0,0,0.3)'
                                }} activeOpacity={1}
                                    onPress={() => {
                                        this.setState({
                                            showSxMore: false
                                        }, () => {
                                            this.refs.ServiceProviderTypeModal.hideModal();
                                        })
                                    }} /> : <View />
                        } />
                    <ServiceProviderTypeModal ref='ServiceProviderTypeModal' cate={this.state.oneCate} onChoose={(item, index) => {
                        this.setState({
                            showSxMore: index == '2' ? false : true,
                            chooseCate: item
                        }, () => {
                            this.refs.StickyListView._onRefresh();
                        })
                    }} />
                </View>
            </View>
        )
    }

    getCarouselView() {
        let views = []
        for (let i = 0, len = this.state.CarouselList.length; i < len; i++) {
            let item = this.state.CarouselList[i];
            views.push(
                <TouchableOpacity key={i} style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                }} activeOpacity={0.8} onPress={() => {
                    contactBrowser(item.link)
                }}>
                    <Image
                        source={{ uri: item.thumb }}
                        style={{
                            width: width, height: 174 * unitWidth,
                        }}
                        resizeMode='cover' />
                </TouchableOpacity>
            )
        }
        return views;
    }

    getScreenView() {
        let views = []
        for (let i = 0, len = this.state.oneCate.length; i < len && i < 4; i++) {
            let item = this.state.oneCate[i];
            views.push(
                <TouchableOpacity key={i} style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: this.state.chooseCate.id == item.id ? Colors.colorOrange : Colors.coloree,
                    borderRadius: 20,
                    paddingHorizontal: 7 * unitWidth,
                    marginHorizontal: 7 * unitWidth
                }} activeOpacity={0.5} onPress={() => {
                    if (this.state.chooseCate.id == item.id) {
                        this.setState({
                            chooseCate: {}
                        }, () => {
                            this.refs.StickyListView._onRefresh();
                            DeviceEventEmitter.emit('ServiceListChange', {});
                        })
                    } else {
                        this.setState({
                            chooseCate: item
                        }, () => {
                            this.refs.StickyListView._onRefresh();
                            DeviceEventEmitter.emit('ServiceListChange', item);
                        })
                    }
                }}>
                    <Text style={{
                        color: this.state.chooseCate.id == item.id ? Colors.white : Colors.color99,
                    }}>{item.catename}</Text>
                </TouchableOpacity>
            )
        }
        return views;
    }

    //分类
    getIndex() {
        let params = {
            parentid: this.classify,
        }
        postFetch(api_merch_list_category, params, {
            success: (response) => {
                this.setState({
                    oneCate: response.result.list
                })
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }

    //获取商品列表
    getData(page) {
        let params = {
            page: page,
            lat: global.locationInfo.lat,
            lng: global.locationInfo.lng,
            sorttype: 1
        }
        if (this.state.chooseCate && this.state.chooseCate.id) {
            params['cateid'] = this.state.chooseCate.id
        } else {
            params['cateid'] = this.classify
        }
        if (this.state.desc == '1') {
            params['by'] = 'desc'
        } else if (this.state.desc == '2') {
            params['by'] = 'asc'
        } else if (this.state.desc == '3') {
            params['order'] = 'accounttotal'
            params['by'] = 'desc'
        } else if (this.state.desc == '4') {
            params['order'] = 'accounttotal'
            params['by'] = 'asc'
        } else if (this.state.desc == '5') {
            params['sorttype'] = '1'
        } else if (this.state.desc == '6') {
            params['sorttype'] = '0'
        }
        postFetch(api_merch_list_ajaxmerchuser, params, {
            success: (response) => {
                if (page == 1) {
                    this.setState({
                        list: response.result.list,
                    }, () => {
                        this.refs.StickyListView.onHasMore();
                    })
                } else {
                    if (response.result.list && response.result.list.length > 0) {
                        this.setState({
                            list: this.state.list.concat(response.result.list),
                        }, () => {
                            this.refs.StickyListView.onHasMore();
                        })
                    } else {
                        this.refs.StickyListView.onNoMore();
                    }
                }
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}